<template>
    <div class="hello">
        <br />
        <TypingAnimation :text="text"></TypingAnimation>
        <h3>随笔</h3>
        <ul>
            <li>
                <a
                    href="https://router.vuejs.org"
                    target="_blank"
                    rel="noopener"
                    >我会在这里写，很多关于你，或关于其他，聊聊足球，聊聊詹姆斯</a
                >
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
// import 'papercss/dist/paper.css'; 已移除
import TypingAnimation from '@/components/TypingAnimation.vue';

@Component({
    components: {
        TypingAnimation,
    },
})
export default class HelloWorld extends Vue {
    @Prop() private msg!: string;

    private text: string =
        '“渔夫桑提亚哥在海上捕鱼，前84天一无所获，第85天，他冒险去从未去过的深海打鱼。他发现一条大马林鱼， 耗时3天刺死了它，回归途中遭到鲨鱼五次袭击，他用鱼叉、船桨和刀子反击，历尽千辛万苦，终于回到港口，但巴林鱼仅剩下五幅巨大的白骨架。”';
}
</script>

<style scoped lang="less">
.hello {
    display: flex;
    flex-direction: column;
    align-items: center;
}
p {
    font-size: 1.4em;
}
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
div {
    text-align: center;
}
</style>
